<script setup lang="ts">
import type {User} from "@/models/user";

// 定义数据从父组件进行传递
interface UserCardListProps {
  userList: User[];
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  // 如果后端返回null，则使用默认值来展示
  userList: () => [] as User[],
});

</script>

<template>
  <div class="list-box" v-for="user in props.userList">
    <van-card
        style="background-color:#fff;"
        :desc="user?.profile || '用户暂未提供简介...' "
        :tag="user.gender === 1 ? '男' : '女' "
        :title="user.username || '暂无昵称' "
        :thumb="user.avatarUrl || 'https://img.yzcdn.cn/vant/cat.jpeg' "
    >
      <template #tags>
        <div class="user-list-box">
          <van-tag class="user-list-tags" v-for="(tag, index) in JSON.parse(user.tags)" :key="index" plain type="primary">{{ tag ?? '空标签' }}</van-tag>
        </div>
        <!-- 解析后是空数组时，显示兜底标签 -->
        <van-tag
            v-if="JSON.parse(user.tags).length === 0"
            class="user-list-tags"
            plain
            type="primary"
        >
          空标签
        </van-tag>
      </template>
      <template #price>
        <div>
          <span style="font-weight: 400"><strong>Email：</strong>{{ user.email || '暂未提供' }}</span>
        </div>
      </template>
      <template #footer>
        <van-button type="primary" plain size="mini">联系我</van-button>
      </template>
    </van-card>
  </div>
</template>

<style scoped>
.user-list-tags {
  margin-right: 5px
}

.user-list-tags:last-child {
  margin-right: 0
}

.user-list-box {
  margin-top: 10px;
}

.list-box {
  margin-top: 5px;
  margin-bottom: 10px;
}
</style>